<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <demo-button>rr</demo-button> -->
    <el-table
      :data="renderDynamic"
      ref="product"
      border
      row-key="producttypeId"
      :row-class-name="rowClassNameFun" //表格行样式
      :header-row-class-name="headerRowClassName" //表格头样式
      size="mini"
      max-height="500px"
      style="width: 100%"
      @select="selectFun" //复选框点击事件
      @select-all="selectAllFun" //表格全选事件
      @selection-change="selectionChange"
      :header-cell-style="{ background: '#fafafa' }"
    >
    </el-table>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      renderDynamic: [],
    };
  },
  mounted() {},
  methods: {
    selectFun(selection, row) {
      this.setRowIsSelect(row);
    },
     checkIsAllSelect() {
      this.oneProductIsSelect = [];
      this.renderDynamic.forEach((item) => {
        this.oneProductIsSelect.push(item.isSelect);
      });
      //判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选
      let isAllSelect = this.oneProductIsSelect.every((selectStatusItem) => {
        return true == selectStatusItem;
      });
      return isAllSelect;
    },
     selectAllFun(selection) {
      let isAllSelect = this.checkIsAllSelect();
      this.renderDynamic.forEach((item) => {
        item.isSelect = isAllSelect;
         this.$refs.product.toggleRowSelection(item, !isAllSelect);
        this.selectFun(selection, item);
      });
    },
 rowClassNameFun({ row }) {
      if (row.isSelect === "") {
        return "indeterminate";
      }
    },
    headerRowClassName({ row }) {
      let oneProductIsSelect = [];
      this.renderDynamic.forEach((item) => {
        oneProductIsSelect.push(item.isSelect);
      });
      if (oneProductIsSelect.includes("")) {
        return "indeterminate";
      }
      return "";
    },
    setRowIsSelect(row) {
      //当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果
      if (row.isSelect === "") {
        row.isSelect = false;
        this.$refs.product.toggleRowSelection(row, true);
      }
      row.isSelect = !row.isSelect;
      //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选
      if (row.children && row.children.length > 0) {
        row.children.forEach((item) => {
          item.isSelect = row.isSelect;
          this.$refs.product.toggleRowSelection(item, row.isSelect);
        });
      } else {
        //操作的是子节点  1、获取父节点  2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态
        let parentId = row.parentId;

        this.renderDynamic.forEach((item) => {
          let isAllSelect = [];
          if (item.id == parentId) {
            item.children.forEach((childrenItem) => {
              isAllSelect.push(childrenItem.isSelect);
            });
            if (
              isAllSelect.every((selectItem) => {
                return true == selectItem;
              })
            ) {
              item.isSelect = true;
              this.$refs.product.toggleRowSelection(item, true);
            } else if (
              isAllSelect.every((selectItem) => {
                return false == selectItem;
              })
            ) {
              item.isSelect = false;
              this.$refs.product.toggleRowSelection(item, false);
            } else {
              item.isSelect = "";
            }
          }
        });
      }
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.indeterminate .el-checkbox__input .el-checkbox__inner {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}

 .indeterminate .el-checkbox__input .el-checkbox__inner {
    background-color: #F2F6FC;
    border-color: #DCDFE6;
}
.indeterminate .el-checkbox__input .el-checkbox__inner::after {
     border-color: #C0C4CC !important; 
        background-color: #C0C4CC;
}
 .product-show th .el-checkbox__inner{
    display: none !important;

}

.indeterminate .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  position: absolute;
  display: block;
  background-color: #fff;
  height: 2px;
  transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
  width: auto !important;
}
.product-show .el-checkbox__inner {
   display: block !important; 
}

.product-show .el-checkbox {
   display: block !important; 
}

</style>
